<template>
    <view class="w-full h-screen box-border pt-[var(--top-m)] bg-[var(--page-bg-color)] setting-wrap" :style="themeColor()">
        <view class="mb-[var(--top-m)] sidebar-margin card-template !py-[20rpx]" v-if="info">
            <u-cell-group :border="false" class="cell-group">
                <u-cell :title="t('personalSettings')" :is-link="true" url="/app/pages/member/personal"></u-cell>
                <u-cell title="邀请人" :titleStyle="{'font-size': '28rpx'}" :is-link="true" :value="info.pid ? info.parent_member_id.member.nickname : '' || t('unknown')" v-if="!info.pid" @click="updateInvite.modal=true"></u-cell>
                <u-cell title="邀请人" :titleStyle="{'font-size': '28rpx'}" :is-link="false" :value="info.parent_member_id.member.nickname || t('unknown')" v-else></u-cell>
<!--                <u-cell :title="t('switchLang')" :is-link="true" :value="lang" @click="langSheetShow = true"></u-cell>-->
                <u-cell :title="t('version')" :value="version"></u-cell>
            </u-cell-group>
        </view>
        <view class="mb-[var(--top-m)] sidebar-margin card-template !py-[20rpx]">
            <u-cell-group :border="false" class="cell-group">
                <u-cell :title="t('userAgreement')" :is-link="true" url="/app/pages/auth/agreement?key=service"></u-cell>
                <u-cell :title="t('privacyAgreement')" :is-link="true" url="/app/pages/auth/agreement?key=privacy"></u-cell>
            </u-cell-group>
        </view>

        <view class="h-[88rpx] flex-center bg-[#fff] mx-[var(--sidebar-m)] rounded-[var(--rounded-big)] text-[28rpx]" @click="memberStore.logout(true)">{{ t('logout') }}</view>

        <u-action-sheet :actions="langList" :show="langSheetShow" :closeOnClickOverlay="true"
                        :safeAreaInsetBottom="true"
                        @close="langSheetShow = false" @select="switchLang"></u-action-sheet>

       <!-- 绑定邀请人 -->
      <u-popup class="popup-type" :safeAreaInsetBottom="false" round="var(--rounded-big)" :show="updateInvite.modal" mode="center" @close="updateInvite.modal = false">
        <view class="w-[620rpx] popup-common pb-[40rpx]" @touchmove.prevent.stop>
          <view class="title !pt-[50rpx] !pb-[60rpx]">绑定邀请人</view>
          <view>
            <view class="mx-[50rpx] border-0 border-b border-[#eee] border-solid flex items-center">
              <span class="text-[#C3C3C3] text-[28rpx] mx-[30rpx] w-[200rpx]">手机号</span>
              <input class="h-[88rpx] text-[26rpx] w-[400rpx]" v-model="updateInvite.value" placeholder="请输入邀请人手机号" placeholderClass="text-[26rpx] h-[88rpx] flex items-center" @blur="bindInvite"/>
            </view>
            <view class="px-[60rpx] pt-[70rpx]">
              <button hover-class="none" class="primary-btn-bg text-[#fff] h-[80rpx] font-500 leading-[80rpx] rounded-[100rpx] text-[26rpx]" @click="updateInviteConfirm">{{ t('confirm') }}</button>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import useMemberStore from '@/stores/member'
import {bindInviteMember} from "@/app/api/member";
import { t, language } from '@/locale'

const memberStore = useMemberStore()
const info = computed(() => memberStore.info)

const version = ref(import.meta.env.VITE_APP_VERSION)

/**
 * 支持的语言列表
 */
const langList = reactive({
    'zh-Hans': { name: '简体中文', fontSize: '14', value: 'zh-Hans' },
    'en': { name: 'English', fontSize: '14', value: 'en' }
})
const langSheetShow = ref(false)

// 当前语言
const lang = computed(() => {
    const lang = uni.getLocale()
    return langList[lang].name
})

/**
 * 绑定邀请人
 */
const updateInvite = reactive({
  modal: false,
  value: ''
})
const bindInvite= (e: any) => {
  updateInvite.value = e.detail.value
}
const updateInviteConfirm = () => {
  bindInviteMember({mobile: updateInvite.value}).then(res => {
    useMemberStore().getMemberInfo()
    updateInvite.modal = false;
  })
}

/**
 * 切换语言
 */
const switchLang = (lang) => {
    language.loadAllLocaleMessages('app', lang.value)
}
</script>

<style lang="scss" scoped>
page {
    background: var(--page-bg-color);
}

:deep(.cell-group), :deep(.u-cell-group) {
    .u-cell {
        .u-cell__body {
            padding: 0;
            height: 90rpx;
            margin-top: 16rpx;
        }

        &:first-of-type .u-cell__body {
            margin-top: 0;
        }

        .u-cell__title-text {
            font-size: 28rpx;
            line-height: 40rpx;
        }

        .u-icon__icon {
            font-size: 24rpx !important;
        }

        .u-cell__value {
            line-height: 1;
            font-size: 28rpx;
        }

        .u-line {
            display: none;
        }
    }
}

:deep(.u-action-sheet) {
    .u-line {
        margin: 0 30rpx !important;
        width: auto !important;
        border-color: #ddd !important;
    }

    .u-action-sheet__cancel {
        padding: 0;

    }

    .u-action-sheet__item-wrap__item__name {
        font-size: 30rpx !important;
    }
}
</style>
<style>
.setting-wrap .u-cell--clickable {
    background-color: transparent !important;
}
</style>
